// ==========================================================================
// Buttons
// ==========================================================================

// resets button styles
button {
	background: transparent;
	border: none;
	outline: 0;
	padding: 0;
	font-size: 14px;
	-webkit-appearance: none;
	appearance: none;
	vertical-align: baseline;
}

.button {
	background: $white;
	border-color: lighten( $gray, 20% );
	border-style: solid;
	border-width: 1px 1px 2px;
	color: $gray-dark;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	outline: 0;
	overflow: hidden;
	font-weight: 500;
	text-overflow: ellipsis;
	text-decoration: none;
	vertical-align: top;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 21px;
	border-radius: 4px;
	padding: 7px 14px 9px;
	-webkit-appearance: none;
	appearance: none;

	&:hover {
		border-color: lighten( $gray, 10% );
		color: $gray-dark;
	}
	&:active {
		border-width: 2px 1px 1px;
	}
	&:visited {
		color: $gray-dark;
	}
	&[disabled],
	&:disabled {
		color: lighten( $gray, 30% );
		background: $white;
		border-color: lighten( $gray, 30% );
		cursor: default;

		&:active {
			border-width: 1px 1px 2px;
		}
	}
	.accessible-focus & {
		&:focus {
			border-color: $blue-medium;
			box-shadow: 0 0 0 2px $blue-light;
		}
	}
	&.is-compact {
		padding: 7px;
		color: $gray-text-min;
		font-size: 11px;
		line-height: 1;
		text-transform: uppercase;

		&:disabled {
			color: lighten( $gray, 30% );
		}
		.gridicon {
			top: 4px;
			margin-top: -8px;
		}
		// Make the left margin of the small plus icon visually less huge
		.gridicons-plus-small {
			margin-left: -4px;
		}
		// Reset the left margin if the button contains only the plus icon
		.gridicons-plus-small:last-of-type {
			margin-left: 0;
		}
		// Make plus icon nudged closer to adjacent icons for add-people and add-plugin type buttons
		.gridicons-plus-small + .gridicon {
			margin-left: -4px;
		}
	}
	&.is-busy {
		animation: button__busy-animation 3000ms infinite linear;
		background-size: 120px 100%;
		background-image: linear-gradient( -45deg, lighten( $gray, 30% ) 28%, $white 28%, $white 72%, lighten( $gray, 30% ) 72%);
	}
	&.hidden {
		display: none;
	}
	.gridicon {
		position: relative;
			top: 4px;
		margin-top: -2px;
		width: 18px;
		height: 18px;
	}
}

// Primary buttons
.button.is-primary {
	background: $blue-medium;
	border-color: darken( $blue-medium, 8% );
	color: $white;

	&:hover,
	&:focus {
		border-color: $blue-dark;
		color: $white;
	}
	&.is-compact {
		color: $white;
	}
	&[disabled],
	&:disabled {
		color: lighten( $gray, 30% );
		background: $white;
		border-color: lighten( $gray, 30% );
	}
	&.is-busy {
		background-size: 120px 100%;
		background-image: linear-gradient( -45deg, $blue-medium 28%, darken( $blue-medium, 5% ) 28%, darken( $blue-medium, 5% ) 72%, $blue-medium 72%);
	}
}

// Scary buttons
.button.is-scary {
	color: $alert-red;

	&:hover,
	&:focus {
		border-color: $alert-red;
	}
	&:focus {
		box-shadow: 0 0 0 2px lighten( $alert-red, 20% );
	}
	&[disabled],
	&:disabled {
		color: lighten( $alert-red, 30% );
		border-color: lighten( $gray, 30% );
	}
}

.button.is-primary.is-scary {
	background: $alert-red;
	border-color: darken( $alert-red, 20% );
	color: $white;

	&:hover,
	&:focus {
		border-color: darken( $alert-red, 40% );
	}
	&[disabled],
	&:disabled {
		background: lighten( $alert-red, 20% );
		border-color: tint( $alert-red, 30% );
	}
}

.button.is-borderless {
	border: none;
	background: none;
	color: $gray-text-min;
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;

	&:hover,
	&:focus {
		box-shadow: none;
		color: $gray-dark;
	}

	.gridicon {
		width: 24px;
		height: 24px;
		top: 6px;
	}

	&[disabled],
	&:disabled {
		color: lighten( $gray, 30% );
		cursor: default;

		&:active {
			border-width: 0;
		}
	}
	&.is-scary {
		color: $alert-red;

		&:hover,
		&:focus {
			color: darken( $alert-red, 20% );
		}

		&[disabled] {
			color: lighten( $alert-red, 30% );
		}
	}

	&.is-compact {
		.gridicon {
			width: 18px;
			height: 18px;
			top: 5px;
		}

		//arrows sit 1px low in their svg bounding box, need a nudge
		.gridicons-arrow-left {
			top: 4px;
			margin-right: 4px;
		}

		.gridicons-arrow-right {
			top: 4px;
			margin-left: 4px;
		}
	}
}

// ==========================================================================
// Resets
// ==========================================================================

// Turn Reset 'buttons' into regular text links
.layout__content input,
.dialog__content input {
	&[type=reset],
	&[type=reset]:hover,
	&[type=reset]:active,
	&[type=reset]:focus {
		background: 0 0;
		border: 0;
		padding: 0 2px 1px;
		width: auto;
		box-shadow: none;
	}
}

// Buttons within sentences sit on the text baseline.
.layout__content p .button,
.dialog__content p .button {
	vertical-align: baseline;
}

// Firefox Junk
.layout__content button::-moz-focus-inner,
.layout__content input[type=reset]::-moz-focus-inner,
.layout__content input[type=button]::-moz-focus-inner,
.layout__content input[type=submit]::-moz-focus-inner ,
.dialog__content button::-moz-focus-inner,
.dialog__content input[type=reset]::-moz-focus-inner,
.dialog__content input[type=button]::-moz-focus-inner,
.dialog__content input[type=submit]::-moz-focus-inner {
	border: 0;
	padding: 0;
}

// ==========================================================================
// Deprecated styles
// ==========================================================================

.button.is-link {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	color: $blue-medium;
	font-weight: 400;
	font-size: inherit;
	line-height: 1.65;

	&:hover,
	&:focus,
	&:active {
		color: $link-highlight;
		box-shadow: none;
	}
}

// Positions and resets font styles of noticons applied to buttons
.button.noticon {
	line-height: inherit;

	&:before {
		display: inline-block;
		vertical-align: middle;
		margin-top: -2px;
		font-size: 16px;
		font-style: normal;
		font-weight: normal;
	}
}


@keyframes button__busy-animation {
  0%   { background-position: 240px 0; }
}
